<html>
    <head>
        <meta charset="utf-8">
        <title>BingMap图层</title>
        <!-- leaflet的css样式 -->
        <link rel="stylesheet" href="../lib/leaflet.css" />
        <!-- leaflet的js库 -->
        <script type="text/javascript" src="../lib/leaflet-src.js"></script>

        <!-- 1. 添加BingMap插件的引用-->
        <script type="text/javascript" src="../lib/plugins/leaflet-bing-layer.min.js"></script>

        <!-- 地图容器样式 -->
        <style>
            #mapDiv{
                width: 100%;
                height: 100%;
            }
        </style>

        <script type="text/javascript">
            var map = null; 

            function init(){

                map = L.map("mapDiv", { 
                    center: [0,0],
                    zoom: 1,
                });

                //加载BingMap图层
                // 2.指定BingMap的Key
                var BING_KEY = 'AuhiCJHlGzhg93IqUH_oCpl_-ZUrIE6SPftlyGYUvr9Amx5nzA-WqGcPquyFZl4L';

                // 3.添加BingMap图层map
                var bingLayer = L.tileLayer.bing(
                                    BING_KEY
                                ).addTo(map);
            }
        </script>
            
    </head>
    <body onload="init()">
        <!--地图的容器-->
        <div id="mapDiv"></div>
    </body>
</html>



